<template>
	<view class="content">
		<view class="top-bar">
			<view></view>
			<view class="top-bar-right">注册</view>
		</view>
		<!-- logo -->
		<view class="logo">
			<image src="../../static/logo.jpg"></image>
		</view>
		
		<view class="main">
			<view class="title">请登录</view>
			<view class="admsg">welcome back</view>
			<view class="input">
				<input type="text" placeholder="账号/手机号/邮箱" placeholder-style="font-size:12rpx"/>
				<input type="text" placeholder="密码" placeholder-style="font-size:12rpx"/>
			</view>
		</view>
		
		<view class="submit">
			<text>登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	
	.content {
		display: flex;
		flex-direction: column;
		// 主轴
		justify-content: center; // 设置主轴的排列方式
		// padding-top: var(--status-bar-height);
		// padding-top: env(safe-area-inset-top);
		// padding-bottom: 32px;
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		align-items: center;
	}
	
	.submit{
		background-color: rgba(255,228,49,1);
		box-shadow: 0px 50px 32px -36px rgba(255,228,49,0.4);
		height: 36px;
		width: 220px;
		border-radius: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80px;
	}
	
	text{
		font-weight: 500;
		color: rgba(51,51,51,1);
		// 文字阴影
		text-shadow: 1px 1px rgba(0,0,0,.2);
	}
	
	.main{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		view{
			font-size: 36rpx;
			font-weight: 500;
			color: rgba(51,51,51,1);
			// 文字阴影
			text-shadow: 1px 1px rgba(0,0,0,.2);
			padding-left: 30rpx;
			width: 100%;
			input{
				height: 88rpx;
				padding-top: 40rpx;
				line-height: 88rpx;
				border-bottom: 1px solid $uni-border-color;
			}
		}
	}
	
	.logo{
		margin-top: 88rpx;
	}
	
	.top-bar{
		display: flex;
		justify-content: space-between;
		align-items:center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		z-index: 1000;
		background-color: $uni-bg-color;
		box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1);
		.top-bar-right{
			display: flex;
			padding-right: 10px;
			font-size: 36rpx;
			font-weight: 500;
			width: 36px;
			height: 25px;
			line-height: 25px;
			color: rgba(51,51,51,1);
			// 文字阴影
			text-shadow: 1px 1px rgba(0,0,0,.2);
		}
	}
</style>
